import GeekIcon from "@shared/geekIcon";
import { Link, useLocation } from "react-router-dom";
import styles from "@shared/tabbar/styles/styles.module.less";
import classNames from "classnames";
import { useParams } from "react-router-dom";
// 实现高亮
export default function Tabbar() {
  const { pathname } = useLocation();
  const params = useParams();
  const isHome = Object.keys(params).includes("cid");
  return (
    <div className={styles.tabbar}>
      <Link
        to="/"
        className={classNames({
          [styles.active]: isHome,
        })}
      >
        <GeekIcon
          type={isHome ? "iconbtn_home_sel" : "iconbtn_home"}
          className={styles.icon}
        />
        <span>首页</span>
      </Link>
      <Link
        to="/question"
        className={classNames({
          [styles.active]: pathname === "/question",
        })}
      >
        <GeekIcon
          type={pathname === "/question" ? "iconbtn_qa_sel" : "iconbtn_qa"}
          className={styles.icon}
        />
        <span>问答</span>
      </Link>
      <Link
        to="/video"
        className={classNames({
          [styles.active]: pathname === "/video",
        })}
      >
        <GeekIcon
          type={pathname === "/video" ? "iconbtn_video_sel" : "iconbtn_video"}
          className={styles.icon}
        />
        <span>视频</span>
      </Link>
      <Link
        to="/mine"
        className={classNames({
          [styles.active]: pathname === "/mine",
        })}
      >
        <GeekIcon
          type={pathname === "/mine" ? "iconbtn_mine_sel" : "iconbtn_mine"}
          className={styles.icon}
        />
        <span>我的</span>
      </Link>
    </div>
  );
}